<template>
  <div class="count">
    <h2>下面有{{ dogs.length}}条狗</h2>
    <h2>当前求和为：{{ sum }}，{{ bigSum }}</h2>
    <h2>学校名称：{{ school }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="test1">点我+1</button> 
    <button @click="test2">点我-1</button> 
    <button @click="test3">奇数+1</button> 
    <button @click="test4">异步+1</button> 
    <button @click="test5">服务器+1</button> 
  </div>
</template>

<script>
  import { mapGetters, mapState } from 'vuex'
  export default {
    name:'Count',
    computed: {
      ...mapState(['sum','school','address','dogs']),
      ...mapGetters(['bigSum'])
    },
    methods: {
      test1(){
        this.$store.commit('ADD',1)
      },
      test2(){
        this.$store.commit('MINUS',1)
      },
      test3(){
        this.$store.dispatch('oddAdd',1)
      },
      test4(){
        this.$store.dispatch('waitAdd',1)
      },
      test5(){
        this.$store.dispatch('serverAdd')
      }
    },
  }
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>